<template>
    <div style="margin-left: -50px;">
        <h1 style="text-align: center;">ElementUI-子父组件案例</h1>
        <el-card style="width:100%;margin-left: 20px">
            <template #header>
                <div style="color: red;"class="card-header">
                    <span >音乐管理系统</span>
                </div>
            </template>
            <div>
                <el-input v-model="name1" style="width: 240px;margin-left: 900px;" placeholder="Please input"/>
                <el-button type="success" round @click = "serch">查询</el-button>
                <el-button type ="primary" @click = "look">添加</el-button>
                <el-dialog v-model="dialogVisible1"  width="700" :before-close="handleClose">
                    <AddMusic :title=a @onClose = "doonclose"/>
                </el-dialog>
                <el-table :data="tableData" style="width: 100%;text-align: left;" >
                    <el-table-column type="selection" width="55" />
                    <el-table-column label="编号" width="180" prop = "id"></el-table-column>
                    <el-table-column label="图片" width="60"  prop = "picurl">
                        <template #default="scope">
                            <el-image style="width: 60px; height: 60px" :src="scope.row.picurl" :fit="fit" />
                        </template>
                    </el-table-column>
                    <el-table-column label="名字" width="180" prop = "name"></el-table-column>
                    <el-table-column label="歌曲" width="350"  prop = "url">
                        <template #default="scope">
                            <audio controls autoplay loop >
                                <source  :src="scope.row.url">
                            </audio>
                        </template>
                    </el-table-column>
                    <el-table-column label="作者" width="180" prop = "artistsname"></el-table-column>
                    <el-table-column width="180">
                        <template #default="scope">
                            <el-button type = "primary" plain @click="doEdit(scope.row.id)">编辑</el-button>
                            <el-dialog v-model="dialogVisible" title="音乐管理窗口" width="550" :before-close="handleClose">
                                <EditMusic ref="AddMusicFormComponent" @onClose="closeWin" />
                            </el-dialog>
                            <el-button type = "danger" @click = "remove(scope.row.id)">删除</el-button>
                            <el-button type ="primary" @click = "doGetByid(scope.row.id)">查看详情</el-button>
                            <el-dialog v-model="dialogVisible2" title="歌曲详情" width="550" :before-close="handleClose">
                                <GetMusicInfo ref = "getmusic"/>
                            </el-dialog>
                        </template>
                    </el-table-column>
                </el-table>
            </div>
            <template #footer>
                <el-pagination small background layout="prev, pager, next" :page-size = "5" :total="page.items" @current-change = "doChange" class="mt-4"/>
            </template>
        </el-card> 
    </div>
  <RouterView />
</template>

<script setup>
import { ref,onMounted,nextTick } from "vue";
import { ElMessage } from 'element-plus'
import AddMusic from "@/components/AddMusic.vue";
import EditMusic from "@/components/EditMusic.vue";
import GetMusicInfo from "@/components/GetMusicInfo.vue";


//显示数据
const tableData = ref([])
const query = ()=>{
    fetch("http://localhost:3000/musics?_page="+currentPage.value+"&_per_page=5",{
        method:'get'
    }).then(response=>response.json()).then((data)=>{
        tableData.value = data.data
        page.value= data
        // tabledata.value.push(...data)
    })
}
onMounted(()=>{
    query()
})

//分页操作
const page = ref({})
const currentPage = ref(1)
const doChange = (p)=>{
    currentPage.value = p
    query()
}

// 删除数据
const remove =(id)=>{
    fetch("http://localhost:3000/musics/"+id,{
        method:"delete"
    }).then(response=>response.json()).then((data)=>{
            query()
    })
}
// 查看数据
const dialogVisible2 = ref(false)
const getmusic = ref(null)
const doGetByid=(id)=>{
    dialogVisible2.value=true
    nextTick(()=>{
        getmusic.value.querybyid(id);  //調用内部組件的編輯方法 
		})
	
}

// 查询数据
const name1 = ref("");
const serch =()=>{
    fetch("http://localhost:3000/musics?name="+name1.value,{
        method:"get"
    }).then(response=>response.json()).then((data)=>{
            tableData.value = data
     }) 
}

//添加数据
const a = ref("")
// 定义变量 dialogVisible1 控制窗口是否展开
const dialogVisible1 = ref(false)
// (当点击添加按钮的时候look函数执行，窗口打开)
const look = ()=>{
    dialogVisible1.value = true;
    a.value = "音乐添加窗口"
}
//当执行完组件时候，根据子组件注册发送的方法，调用doonclose函数关闭窗口，并刷新页面
const doonclose = ()=>{
    dialogVisible1.value = false
    query()
}

//编辑数据
const  AddMusicFormComponent =ref(null)  //特指子组件
const dialogVisible = ref(false)
const doEdit = (id) => {
    dialogVisible.value = true;
		//调用子组件暴漏的方法(nextTick函数的意思是dom元素出來之后，才调用内部的代码)
		nextTick(()=>{
			AddMusicFormComponent.value.doMyEdit(id);  //調用内部組件的編輯方法 
		})
	
	}
//closeWin
const closeWin = ()=>{
    dialogVisible.value = false
    query()
}


</script>